<template>
  <div style="padding:10px">
     <main-layout>
      <div>
        <div class="back-view">
          <div class="title vxe-icon-feedback">申请售后</div>
          <div class="back" @click="onClose">
            <vxe-button  size="small" content="返回" icon="vxe-icon-undo"></vxe-button>
           </div>
        </div>
        <el-form ref="ruleFormRef" :rules="rules" :model="formdata" label-width="80px">
          <el-form-item label="售后类型" prop="radio"> 
            <el-radio-group v-model="formdata.radio">
              <el-radio :label="1">退货退款</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item  label="售后商品" prop="spuInfoId">
            <vxe-pulldown v-model="showPull">
              <template #default>
                <el-input v-model="formdata.spuInfoId" style="width:60vw;" @focus="focusEvent" @keyup="keyupEvent" placeholder="搜索商品名称、规格、品牌" />
              </template>
          <template #dropdown>
            <div class="my-dropdown1">
              <vxe-table
              border
              style="width:60vw;"
              height="auto"
              :row-config="{keyField: 'value', isHover: true}"
              :column-config="{resizable: true}"
              :scroll-y="{enabled: true}"
              size="small"  
              :data="queryList">
              <vxe-column type="seq" width="60" title="序号"></vxe-column>
              <vxe-column field="label" title="商品名称"></vxe-column>
              <vxe-column field="label" title="商品图片">
                <template #default="{row}">
                    <imageView  v-model="row.url" />
                 </template>
              </vxe-column>
              <vxe-column field="label" title="产品规格"></vxe-column>
              <vxe-column field="label" title="价格(元)"></vxe-column>
              <vxe-column field="label" title="可售库存(kg)"></vxe-column>
              <vxe-column field="label" title="品牌"></vxe-column>
              <vxe-column field="label" title="操作">
                <template #default="{row}">
                    <vxe-button type="text" status="primary"  icon="vxe-icon-add">添加</vxe-button>
                 </template>
              </vxe-column>
            </vxe-table> 
              </div>
            </template>
          </vxe-pulldown>
        </el-form-item>
          <el-form-item> 
            <vxe-table
              border
              style="width:60vw;margin-top:10px"
              :row-config="{keyField: 'value', isHover: true}"
              :column-config="{resizable: true}"
              :scroll-y="{enabled: true}"
              size="small"  
              :data="orderList">
              <vxe-column type="seq" width="60" title="序号"></vxe-column>
              <vxe-column field="label" title="商品图片">
                <template #default="{row}">
                    <imageView  v-model="row.url" />
                 </template>
              </vxe-column>
              <vxe-column field="label" title="商品名称"></vxe-column>
              <vxe-column field="label" title="产品规格"></vxe-column>
              <vxe-column field="label" title="数量" align="center" width="180">
                <template #default="{row}">
                  <el-input-number v-model="row.salesAmount"  :precision="2" :step="1" :max="10000000"></el-input-number>
                 </template>
              </vxe-column>
              <vxe-column field="label" title="可售库存(kg)"></vxe-column>
              <vxe-column field="label" title="价格(元)"></vxe-column>
              <vxe-column field="label" title="优惠(元)"></vxe-column>
              <vxe-column field="label" title="小计(元)"></vxe-column>
              <vxe-column field="label" title="操作">
                <template #default="{row,index}">
                    <vxe-button icon="vxe-icon-delete" @click="delItem(index)" title="删除" status="danger"></vxe-button>
                 </template>
              </vxe-column>
            </vxe-table> 
          </el-form-item>
          <el-form-item label="退款金额"> 
            <span style="font-size:18px;color:red;padding-right:4px;">500</span> 元
          </el-form-item>
          <el-form-item label="退款原因" prop="skuName"> 
            <el-select style="width:400px;" 
              v-model="formdata.skuName"
              placeholder="请选择">
              <el-option
                v-for="item in []"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
            <div style="width: 100%;font-size: 13px;color: #888;">
              提示：根据《售后服务协议》无理由退款费产生的物流费用由买方承担。
            </div>
          </el-form-item>
          <el-form-item label="上传凭证" prop="skuName"> 
            <uploadView />
          </el-form-item>
          <el-form-item label="退款描述">
            <el-input
            type="textarea"
            style="width:400px;"
            :rows="6"
            placeholder="退款描述"
            v-model="formdata.textarea">
          </el-input>
          </el-form-item> 

      </el-form>
        <div style="padding-left: 80px;padding-top:20px;">
          <el-button @click="onClose"><vxe-icon name="close"></vxe-icon> 取消</el-button>
          <el-button type="primary" @click="onSubmit"><vxe-icon name="check"></vxe-icon> 结算</el-button>
        </div>
        </div>
    </main-layout>
</div> 
</template>
<script setup>
import { ref, onMounted, reactive } from 'vue'
import { getSelectList } from '@/api/select'
import mainLayout from '@/components/custom/mainLayout.vue'
import imageView from '@/components/custom/image.vue'
import uploadView from '@/components/upload/image.vue'
import { VXETable } from 'vxe-table'
import { useRouter } from 'vue-router'
const router = useRouter()
const ruleFormRef = ref(null)
const formdata = ref({})
const orderList = ref([{}])
const queryList = ref([{}])
const showPull = ref(false)
const addFlag = ref(false)

const rules = reactive({
  spuInfoId: [
    { required: true, message: '此项不能为空', trigger: 'blur' },
  ],
  skuName: [
    { required: true, message: '此项不能为空', trigger: 'blur' },
  ],
  images: [
    { required: true, message: '此项不能为空', trigger: 'blur' },
  ]
})


onMounted(async () => {

})
const focusEvent = () => {
  showPull.value = true
}

const keyupEvent = () => {
}
const delItem = (index) => {
  orderList.value.splice(index,1)
}


const onSubmit = async() => {

  await ruleFormRef.value.validate(async(valid, fields) => {
    if (valid) {
      router.push(`/factor/purchase/create-order`)
     let res ={}
      if (res.success) {
        VXETable.modal.message({ content: '保存成功',status:'success' })
      } else {
        VXETable.modal.message({ content: res.message,status:'error'})
      }
    }
  })
}

const onClose = ()=>{
  router.go(-1)
}



</script>
<style lang="scss" scoped>
.show-box{
    width:400px;
    background-color: #f5f5f5;
    margin: 10px 0;
    border-radius: 2px;
    padding: 10px 0;
}
.back-view{
    display: flex;
    justify-content: space-between;
    padding: 0 10px 15px 0;
    align-items: center;
    border-bottom:1px solid #ddd;
    margin-bottom:20px;
    .title{
      font-size:15px;
      font-weight: bold;
      color:#565656;
      position: relative;  


      text-indent:6px;
    }
    .title::before {
      content: "";
      display: block;
      width: 3px;
      background: #FF9C00;
      height: 16px;
      margin: 0 3px 0 0;
      position: absolute;
      top: 50%;
      margin-top: -9px;
  }
  .back{
    font-size:15px;
    color:#888;
    cursor: pointer;
  }
}

</style>
